<!-- 
  @name: 站点详情
  @date: 2019.12.31
 -->
<template>
	<view class="content">
		<!-- 站点信息-start -->
		<view class="info">
			<view class="msg">
				<view class="title">
					<text class="name">{{info.siteName}}</text>
					<view class="coll"  @tap="isFave">
						<view class="icon" :class="info.isFav === 1 ? 'fav-1' : 'fav-2'"></view>
						<text class="text" v-text="info.isFav === 1 ? '已收藏' : '收藏'"></text>
					</view>
				</view>
				<view class="more">
					<view class="icon1"></view>
					<view class="text">{{info.siteAddress}}</view>
				</view>
				<view class="more">
					<view class="icon2"></view>
					<view class="text">尿素品牌：
					<text v-text="info.siteBrand ? info.siteBrand : '--'"></text>
					</view>
				</view>
				<view class="more" @tap="callPhone">
					<view class="icon3"></view>
					<view class="text" v-text="info.contactPhone ? info.contactPhone : '--'"></view>
				</view>
			</view>
			<view class="nav">
				<view class="icon" @tap="$navStart(info.latitude, info.longitude)"></view>
				<view class="text">{{info.distance}}KM</view>
			</view>
		</view>
		<!-- 站点信息-end -->
		
		<!-- 所属商户 -->
		<view class="business">
			<text @tap="$navigateTo('./busi?operaId=' + info.operaId)">所属商户：{{info.operName}}</text>
		</view>
		
		<!-- 站点图片-start -->
		<view class="photo" v-show="picList.length > 0">
			<view class="title">站点图片</view>
			<image
				class="img"
				mode="center"
				v-for="(item, index) in picList" 
				:key="index"
				:src="item"
				@tap="showImg(index)"></image>
		</view>
		<!-- 站点图片-end -->
		
		<!-- 优惠图片 -->
		<view class="ticket" @tap="$navigateTo('/pagesUc/chargeChannel/chargeChannel?operaId=' + info.operaId)"></view>
		
		<!-- 轮播图-start -->
		<view class="_popup" v-if="swiperShow" @tap="swiperShow = false">
			<view class="close"></view>
		</view>
		<swiper
			class="swiper"
			v-if="swiperShow"
			indicator-dots="true"
			circular="true"
			indicator-color="rgba(255,255,255,.5)"
			indicator-active-color="rgba(255,255,255,1)"
			previous-margin="65rpx"
			next-margin="35rpx"
			:current="swiperCurrent"
			:style="{height: swiperHeight}"
			@change="swiperChange">
			<swiper-item v-for="(item, index) in picList" :key="index">
				<image
					class="img"
					:src="item"
					:style="{height: swiperCurrent === index ? swiperImgHeight : swiperImgHeight2,
							 marginTop: swiperCurrent === index ? '0' : '28rpx'}"
				></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图-end -->
		
		<!-- 登录提示 -->
		<sign-in @submit="getInfo"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteId: 0,  //站点id
				info: {
					isFav: 0
				},  //加注站信息
				picList: [],  //站点图片
				swiperShow: false,  //是否显示图片轮播
				swiper_height: 0,  //轮播图高度(rpx)
				swiperCurrent: 0,  //轮播图位置
			}
		},
		computed: {
		    swiperHeight() {
		        return this.swiper_height + 'rpx';
		    },
		    swiperImgHeight() {
		        return (this.swiper_height - 70) + 'rpx';
		    },
		    swiperImgHeight2() {
		        return (this.swiper_height - 126) + 'rpx';
		    },
			//登录状态
			isLogin() {
				return this.$store.state.isLogin;
			}
		},
		onLoad(e) {
			this.siteId = e.siteId;
			this.getInfo();
			this.getSwiperHeight();
		},
		methods: {
			//轮播图滑动
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			//计算轮播区域高度
			getSwiperHeight() {
				let sys = uni.getSystemInfoSync();
				let windowHeight = 750 / sys.windowWidth * sys.windowHeight;  //屏幕可视区域高度转为rpx
				this.swiper_height = windowHeight - 200;
			},
			//点击图片
			showImg(index) {
				this.swiperShow = true;
				this.swiperCurrent = index;
			},
			//拨打电话
			callPhone() {
				if(this.info.contactPhone) {
					this.$callTel(this.info.contactPhone);
				}
			},
			//收藏/取消收藏
			isFave() {
				if(!this.isLogin) {
					this.$store.commit('showLogin', true);
					return;
				}
				let action = this.info.isFav === 1 ? 0 : 1;
				this.$http({
					url: this.$api.userUrl + 'addorcancelfavoritesite',
					data: {
						siteId: this.info.siteId,
						action: action
					}
				}).then(res => {
					this.info.isFav = action;
				});
			},
			//获取加注站信息
			getInfo() {
				this.$http({
					url: this.$api.siteUrl + 'getfillsitedetail',
					data: {
						siteId: this.siteId
					}
				}).then(res => {
					res = this.convert2TecentMap(res);
					this.info = res;
					this.info.latitude = parseFloat(res.siteLat);
					this.info.longitude = parseFloat(res.siteLng);
					this.info.distance = this.$mapDistance(
						this.info.latitude,
						this.info.longitude,
						this.$store.state.location.latitude,
						this.$store.state.location.longitude
					);
					this.picList = [];
					if(res.siteImgs) {
						let arr = res.siteImgs.split(',');
						arr.forEach(item => {
							if(item) this.picList.push(item);
						});
					}
				});
			},
			convert2TecentMap(obj) {
				if (obj.siteLng == '' && obj.siteLat == '') {
					return obj;
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = obj.siteLng - 0.0065
				var y = obj.siteLat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				obj.siteLng = qqlng;
				obj.siteLat = qqlat;
				return obj;
			}
		}
	}
</script>

<style lang="scss">
	/* 站点信息 */
	.info {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 32rpx 30rpx;
		background-color: $color-white;
		.msg {
			flex: 1;
			padding-right: 20rpx;
		}
		.title {
			display: flex;
			flex-direction: row;
			width: 100%;
			.name {
				font-size: 30rpx;
				font-weight: 600;
				line-height: 50rpx;
			}
			.coll {
				width: 220rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 80rpx;
				.icon {
					width: 32rpx;
					height: 32rpx;
				}
				.icon.fav-1 {
					background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAROAAuuQAAAEV5bxtYU582.png');
				}
				.icon.fav-2 {
					background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UARyAXEGbAAAD24a8yro628.png');
				}
				.text {
					line-height: 48rpx;
					margin-left: 16rpx;
					color: $color-grey-dark;
				}
			}
		}
		.more {
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon1 {
				width: 20rpx;
				height: 26rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UABeAcA14AAAC5JVJuH0392.png');
			}
			.icon2 {
				width: 21rpx;
				height: 26rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UACaAcXkNAAADDCJUTlE479.png');
			}
			.icon3 {
				width: 20rpx;
				height: 21rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UADOAKeDvAAACIiAeqX8258.png');
			}
			.text {
				flex: 1;
				margin-left: 15rpx;
				color: $color-grey-dark;
			}
		}
		.nav {
			text-align: center;
			.icon {
				width: 107rpx;
				height: 107rpx;
				margin-top: 60rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAECAXLBhAAATH28YKQg838.png');
			}
			.text {
				font-family: $font-family-num;
				color: $color-grey-dark;
				margin-top: 20rpx;
			}
		}
	}
	
	/* 所属商户 */
	.business {
		width: 750rpx;
		height: 65rpx;
		padding-left: 30rpx;
		color: $color-text-primary;
		font-size: 30rpx;
		background-color: $color-white;
	}
	
	/* 站点图片 */
	.photo {
		width: 100%;
		margin-top: $spacing-col;
		padding: 30rpx 16rpx;
		padding-bottom: 30rpx;
		background-color: $color-white;
		.title {
			font-size: 30rpx;
			margin-left: 16rpx;
			margin-bottom: 12rpx;
		}
		.img {
			margin: 12rpx 16rpx;
			width: 209rpx;
			height: 209rpx;
			border-radius: $border-radius-bm;
		}
	}
	
	/* 优惠图 */
	.ticket {
		width: 750rpx;
		height: 180rpx;
		margin-top: $spacing-col;
		margin-bottom: $spacing-col;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15KRheAd8phAADhM_LcNt4227.png');
	}
	
	/* 轮播图 */
	._popup {
		.close {
			position: fixed;
			top: 40rpx;
			right: 30rpx;
			width: 37rpx;
			height: 37rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAFGAbG47AAACr5SBkYk079.png');
		}
	}
	.swiper {
		position: fixed;
		top: 110rpx;
		width: 750rpx;
		z-index: $z-index-popup-info;
		.img {
			width: 620rpx;
			border-radius: $border-radius-bm;
			transition: all 0.1s ease-in 0s;
		}
	}
</style>
